<template>
  <div class="myContainer">
    <!-- 设备房基础信息内容 start -->  
    <el-row class="myHeadeTitle">
      <el-col :span="18">
        设备房基础信息
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        设备房名称 :
      </el-col>
      <el-col :span="8">
        <el-input v-model="detail.dev_room_name" placeholder="设备房名称"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        设备房编号 :
      </el-col>
      <el-col :span="8">
        <el-input v-model="detail.dev_room_no" placeholder="设备房编号"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        设备房类型 :
      </el-col>
      <el-col :span="8">
        <template>
          <el-select v-model="devRoomTypeSelected" placeholder="设备房类型">
             <el-option
              v-for="item in Object.keys(devRoomTypeList)"
              :key="devRoomTypeList[item]"
              :label="devRoomTypeList[item]"
              :value="item">
             </el-option>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        所属小区 :
      </el-col>
      <el-col :span="8">
        <template>
           <el-select v-model="areaSelected"
              @visible-change="clickAreaSelect"
              @change="clickAreaChange"
              :loading="areaLoading"
              placeholder="请选择小区">
              <el-option
                v-for="item in areaList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        物理地址 :
      </el-col>
      <el-col :span="8">
        <template>
          <el-select v-model="roomSelected"
              @visible-change="clickRoomSelect"
              :loading="roomLoading"
              placeholder="请选择设备房物理地址">
              <el-option
                v-for="item in roomList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        负责人 :
      </el-col>
      <el-col :span="8">
        <el-input v-model="dutyName" placeholder="负责人" @focus="handleDutyClick"></el-input>
      </el-col>
    </el-row>
    <!-- 设备房基础信息内容 end -->  
    <!-- 设备房内设备信息 start -->
    <el-row class="myHeadeTitle">
      <el-col :span="18">
        设备房内设备信息
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        设备房内设备列表
      </el-col>
      <el-col :span="15">
        <el-button type="primary" class="myBgGreen" @click="handleDevClick" v-if="isShow(225)">绑定</el-button>
        <el-button type="primary" class="myBgGreen" @click="handleDevUnbindClick" v-if="isShow(226)">批量解除绑定</el-button>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="24">
        <template>
          <el-table
            :data="devList"
            v-loading="devListLoading"
            border
            stripe
            @selection-change="handleDevSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="100">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="dev_no"
              label="设备编号">
            </el-table-column>
            <el-table-column
              prop="dev_name"
              label="设备名称">
            </el-table-column>
            <el-table-column
              prop="dev_type"
              label="设备类型">
              <template scope="scope">
                    <span>{{scope.row.dev_type| deviceType}}</span>
                  </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="设备状态">
               <template scope="scope">
              <span>{{scope.row.status| deviceStatus}}</span>
            </template>
            </el-table-column>
            <el-table-column
              prop="dev_model"
              label="设备型号">
            </el-table-column>
            <el-table-column
              prop="exp_date"
              label="质保到期时间">
            </el-table-column>
            <el-table-column
              width="100"
              label="操作">
              <template scope="scope">
                <el-button class="look" type="text" size="small">查看</el-button> |
                <el-button @click="handleDevUnbind(scope.row.dev_id)" class="look" type="text" size="small">解除绑定</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <!-- 设备房内设备信息 end -->
    <!-- 设备房内摄像头信息 start -->
    <el-row class="myHeadeTitle">
      <el-col :span="18">
        设备房内摄像头信息
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        设备房内摄像头列表
      </el-col>
      <el-col :span="15">
        <el-button type="primary" class="myBgGreen" @click="handleCameraClick" v-if="isShow(227)">绑定</el-button>
        <el-button @click="handleCameraUnbindClick" type="primary" class="myBgGreen" v-if="isShow(228)">批量解除绑定</el-button>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="24">
        <template>
          <el-table
            :data="cameraList"
            border
            stripe
            @selection-change="handleCameraSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="100">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="camera_no"
              label="摄像头编号">
            </el-table-column>
            <el-table-column
              prop="camera_name"
              label="摄像头名称">
            </el-table-column>
            <el-table-column
              prop="status"
              label="摄像头状态">
               <template scope="scope">
              <span>{{scope.row.status| deviceStatus}}</span>
            </template>
            </el-table-column>
            <el-table-column
              prop="camera_did"
              label="摄像头DID">
            </el-table-column>
            <el-table-column
              prop="camera_url"
              label="摄像头URL">
            </el-table-column>
            <el-table-column
              width="100"
              label="操作">
              <template scope="scope">
                <el-button class="look" type="text" size="small">查看</el-button> |
                <el-button @click="handleCameraUnbind(scope.row.camera_id)" class="look" type="text" size="small">解除绑定</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <!-- 设备房内摄像头信息 end -->
    <!-- 设备房状态及备注 start -->
    <el-row class="myHeadeTitle">
      <el-col :span="18">
        设备房状态及备注
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        设备房状态
      </el-col>
      <el-col :span="15" class="myLineHeight_45px">
        <template>
          <el-radio-group v-model="detail.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        备注 :
      </el-col>
      <el-col :span="21" class="myLineHeight_45px">
        <el-input v-model="detail.extra_desc" type="textarea" placeholder="备注"></el-input>
      </el-col>
    </el-row>
    <!-- 设备房状态及备注 end -->
    <el-row class="myPaddingBottom_10px">
      <el-col :span="15" :offset="3">
        <el-button v-if="type != 'info' && isShow(229)" @click="handleSaveClick" type="primary" class="myBgGreen">保 存</el-button>
        <router-link to="/sbsjList">
          <el-button type="primary" class="myBgGreen">取 消</el-button>
        </router-link>
      </el-col>
    </el-row>




    <!--选择负责人弹出框 start-->
    <el-dialog title="选择负责人" class="myRoleDialog" :visible.sync="newDutyDialogVisible">
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input placeholder="输入关键词" v-model="r_kw"></el-input>
        </el-col>
        <el-col :span="4" class="myTextAlignRight">
          <el-button type="primary" class="myBgGreen" @click="onSearch">查询</el-button>
        </el-col>
      </el-row>
      <div class="myPaddingTop_10px">
        <el-tree 
          ref="dutyDlg"
          class="myOV_y_400px"
          v-loading="dutyDlgListLoading"
          :data="dutyDlgList"
          :props="dutyDlgProps"
          node-key="staff_id"
          @check-change="onChange"
          :render-content="renderContent"
          :filter-node-method="filterNode"
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newDutyDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" 
        @click="handleDutyDlgClick"
        >提 交</el-button>
      </div>
    </el-dialog>
    <!--选择负责人弹出框 end-->
    <!--绑定设备房设备弹出框 start-->
    <el-dialog title="绑定设备房设备"  :visible.sync="newDevDialogVisible">
      <div class="mymarginTop_10px myOV_y_400px">
        <el-row :gutter="10">
          <el-col :span="6">
            <template>
              <el-select
                clearable
                v-model="devTypeDlgSelected"
                placeholder="全部设备类型">
               <el-option
                      v-for="item in Object.keys(devTypeList)"
                      :key="devTypeList[item]"
                      :label="devTypeList[item]"
                      :value="item">
                    </el-option>
              </el-select>
            </template>
          </el-col>
          <el-col :span="6">
            <el-input placeholder="输入关键字进行查询" v-model="devDlgKw"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button class="myBgGreen" @click="onDevDlgSearchKW">查询</el-button>
          </el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col>
            <template>
              <el-table
                :data="devDlgList"
                border
                @selection-change="handleDevDlgSelectionChange"
                style="width: 100%">
                <el-table-column
              type="selection"
              width="100">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="dev_no"
              label="设备编号">
            </el-table-column>
            <el-table-column
              prop="dev_name"
              label="设备名称">
            </el-table-column>
            <el-table-column
              prop="dev_type"
              label="设备类型">
              <template scope="scope">
                    <span>{{scope.row.dev_type| deviceType}}</span>
                  </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="设备状态">
               <template scope="scope">
              <span>{{scope.row.status| deviceStatus}}</span>
            </template>
            </el-table-column>
            <el-table-column
              prop="dev_model"
              label="设备型号">
            </el-table-column>
            <el-table-column
              prop="exp_date"
              label="质保到期时间">
            </el-table-column>
              </el-table>
            </template>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="handleDevDlgClick">绑定到设备房</el-button>
        <el-button type="primary" class="myBgGreen" @click="newDevDialogVisible = false">放弃绑定</el-button>
      </div>
    </el-dialog>
    <!--绑定设备房设备弹出框 end-->
    <!--绑定摄像头到设备房弹出框 start-->
    <el-dialog title="绑定摄像头到设备房"  :visible.sync="newCameraDialogVisible">
      <div class="mymarginTop_10px myOV_y_400px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-input placeholder="输入关键字进行查询" v-model="cameraDlgKw"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button class="myBgGreen" @click="onCameraDlgSearchKW">查询</el-button>
          </el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          <el-col>
            <template>
          <el-table
            v-loading="cameraDlgLoading"
            :data="cameraDlgList"
            border
            @selection-change="handleCameraDlgSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="100">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="camera_no"
              label="摄像头编号">
            </el-table-column>
            <el-table-column
              prop="camera_name"
              label="摄像头名称">
            </el-table-column>
            <el-table-column
              prop="status"
              label="摄像头状态">
               <template scope="scope">
              <span>{{scope.row.status| deviceStatus}}</span>
            </template>
            </el-table-column>
            <el-table-column
              prop="camera_did"
              label="摄像头DID">
            </el-table-column>
            <el-table-column
              prop="camera_url"
              label="摄像头URL">
            </el-table-column>
          </el-table>
        </template>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCameraDlgClick" type="primary" class="myBgGreen" >绑定到设备房</el-button>
        <el-button type="primary" class="myBgGreen" @click="newCameraDialogVisible = false">放弃绑定</el-button>
      </div>
    </el-dialog>
    <!--绑定摄像头到设备房弹出框 end-->
  </div>
</template>  

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px; 
  }
  .myHeadeTitle:before,.myHeadeTitle:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myLineHeight_35px{
    line-height: 35px;
  }
  .myLineHeight_45px{
    line-height: 45px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  } 
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myOV_y_400px{
    overflow-y: scroll;
    max-height: 400px;
    border:1px solid #f2f2f2;
  }
</style>

<script>
import { getAreaList } from '@/api/area';
import { getRoomList } from '@/api/room';
import { getCameraList } from '@/api/camera';
import { getDeviceList, devTypeList } from '@/api/device';
import { devRoomTypeList, getDevRoomDetail, getBindedDev, bindDev,
        unbindDev, getBindedCamera, bindCamera, unbindCamera, createDevRoom, modifyDevRoom } from '@/api/dev_room';
import { getStaffList } from '@/api/staff';
  export default {
     data(){
      return{
        loading: false,
        type: '',
        id: null,
        detail: {},

        // 设备房类型
        devRoomTypeList: devRoomTypeList,
        devRoomTypeSelected: null,

        // 小区信息
        areaList: [],
        areaLoaded: false,
        areaLoading: false,
        areaSelected: null,

        // 设备房间物理地址
        roomList: [],
        roomLoaded: false,
        roomLoading: false,
        roomSelected: null,

        // 责任人
        dutyName: "",
        dutyId: null,

        // 设备信息
        devList: [],
        devMultipleSelection: [],
        devListLoading: false,

        // 摄像头信息
        cameraList: [],
        cameraMultipleSelection: [],

        // 责任人弹出框
        newDutyDialogVisible:false,
        dutyDlgListLoading: false,
        dutyDlgList: [],
        kw: '',
        dutyDlgProps: {
          children: 'children',
          label: 'user_name'
        },

        // 设备弹出框
        devDlgList: [],
        devTypeDlgSelected: null,
        newDevDialogVisible:false,
        devDlgLoading: false,
        devDlgKw: '',
        devDlgMultipleSelection: [],

        // 摄像头弹出框
        cameraDlgList: [],
        cameraTypeDlgSelected: null,
        newCameraDialogVisible:false,
        cameraDlgLoading: false,
        cameraDlgKw: '',
        cameraDlgMultipleSelection: [],

        // 设备类型
        devTypeList: devTypeList,

        modelValue:"",
        modelOptions:[],
        tableDataList:[],
        radio:1,
        newCameraDialogVisible:false,

        r_kw:""
      }
    },
    watch: {
      r_kw(val) {
        this.$refs.dutyDlg.filter(val);
      }
    },
    created(){
      this.type = this.$route.query.type;
      this.id = this.$route.query.id;
      if (this.type != 'add') {
        this.fetchDetail();
      }
    },
    filters: {
      deviceType: function(value) {
        return devTypeList[value];
      }
    },
    methods:{
      filterNode(value, data) {
        if (!value) return true;
        return data.user_name.indexOf(value) !== -1;
      },
      onDevDlgSearchKW() {
        this.fetchDev();
      },
      handleDutyDlgClick() {
        this.newDutyDialogVisible = false;
        var duty = this.$refs.dutyDlg.getCheckedNodes();
        if (duty.length > 0) {
          this.dutyName = duty[0].user_name;
          this.dutyId = duty[0].staff_id;
        }
      },
      handleDevClick() {
        this.newDevDialogVisible = true;
        this.fetchDev();
      },
      handleDevUnbindClick() {
        this.unbindDev(this.devMultipleSelection.join());
      },
      handleDevUnbind(id) {
        this.unbindDev(id);
      },
      handleDevDlgClick() {
        this.newDevDialogVisible = false;
        this.bindDev();
      },
      handleDutyClick() {
        this.newDutyDialogVisible = true;
        this.fetchStaff();
      },
      getBindedDev(vm) {
        console.log(vm.id);
        vm.devListLoading = true;
        getBindedDev(vm.id)
        .then(response => {
          vm.devList = response.data;
          vm.devListLoading = false;
        })
        .catch(error => {
          vm.devListLoading = false;
        })
      },
      bindDev() {
        let params = {
          dev_ids: this.devDlgMultipleSelection.join()
        };
        let vm = this;
        bindDev(this.id, params)
        .then(response =>{
          vm.getBindedDev(vm);
        })
        .catch(error => {

        })
      },
      unbindDev(devIds) {
         let params = {
          dev_ids: devIds
         };
        let vm = this;
        unbindDev(this.id, params)
        .then(response =>{
          vm.getBindedDev(vm);
        })
        .catch(error => {
          
        })
      },
       handleCameraClick() {
        this.newCameraDialogVisible = true;
        this.fetchCamera();
      },
      handleCameraUnbindClick() {
        this.unbindCamera(this.cameraMultipleSelection.join());
      },
      handleCameraUnbind(id) {
        this.unbindCamera(id);
      },
      handleCameraDlgClick() {
        this.newCameraDialogVisible = false;
        this.bindCamera();
      },
      fetchCamera() {
        this.cameraDlgLoading = true;
        let vm = this;
        let params = {
          kw: this.cameraDlgKw,
          show_unbind: true,
          page_num: 1,
          page_size: 1000
        }; 
        getCameraList('a', params)
        .then(response => {
          let res = response.data;
          vm.cameraDlgList = res.rows;

          vm.cameraDlgLoading = false;
        }).catch(error => {
          vm.cameraDlgLoading = false;
        })
      },
      getBindedCamera(vm) {
        vm.cameraListLoading = true;
        getBindedCamera(vm.id)
        .then(response => {
          vm.cameraList = response.data;
          vm.cameraListLoading = false;
        })
        .catch(error => {
          vm.cameraListLoading = false;
        })
      },
      bindCamera() {
        let params = {
          dev_ids: this.cameraDlgMultipleSelection.join()
        };
        let vm = this;
        bindCamera(this.id, params)
        .then(response =>{
          vm.getBindedCamera(vm);
        })
        .catch(error => {

        })
      },
      unbindCamera(devIds) {
         let params = {
          dev_ids: devIds
         };
        let vm = this;
        unbindCamera(this.id, params)
        .then(response =>{
          vm.getBindedCamera(vm);
        })
        .catch(error => {
          
        })
      },
      fetchDetail() {
        let vm = this;
        this.loading = true;

        getDevRoomDetail(this.id)
        .then(response => {
          vm.detail = response.data;

          vm.devRoomTypeSelected = vm.detail.dev_room_type + '';

          vm.areaSelected = vm.detail.area_info.value;
          vm.$set(vm.areaList, 0, vm.detail.area_info);

          vm.roomSelected = vm.detail.room_info.value;
          vm.$set(vm.roomList, 0, vm.detail.room_info);

          if (vm.detail.duty_user_info != null) {
            vm.dutyName = vm.detail.duty_user_info.label;
            vm.dutyId = vm.detail.duty_user_info.value;
          }

          vm.devList = vm.detail.dev_infos;
          vm.cameraList = vm.detail.camera_infos;
          console.log(vm.cameraList);

          vm.loading = false;
        })
        .catch(error => {
          vm.loading = false;
        })
      },
      fetchDev() {
        this.devDlgLoading = true;
        let vm = this;
        let params = {
          kw: this.devDlgKw,
          show_unbind: true,
          dev_type: this.devTypeDlgSelected,
          page_num: 1,
          page_size: 1000
        }; 
        getDeviceList('a', params)
        .then(response => {
          let res = response.data;
          vm.devDlgList = res.rows;

          vm.devDlgLoading = false;
        }).catch(error => {
          vm.devDlgLoading = false;
        })
      },
      fetchStaff() {
        let vm = this;
        if(vm.areaSelected==null){
          return;
        }
        this.dutyDlgListLoading = true;
        vm.r_kw="";
        let params = {
          kw:vm.r_kw,
          is_fuzzy:true,
          page_num: 1,
          page_size: 10000,
          ril: 'S',
          area_id:vm.areaSelected,
        };
        getStaffList(params)
        .then(response => {
          vm.dutyDlgList = response.data.rows;

          vm.dutyDlgListLoading = false;
        })
        .catch(error => {

          vm.dutyDlgListLoading = false;
        })
      },
      onChange(a,b,c){
        let vm=this;
        if(b){
          vm.$refs.dutyDlg.setCheckedKeys([]);
          vm.$refs.dutyDlg.setCheckedKeys([a.staff_id]);
        }else{
          vm.$refs.dutyDlg.setCheckedKeys([]);
        }
      },
      renderContent:function(createElement, { node, data, store }) {
        var vm = this;
        return createElement(
          'div', 
          {
            attrs:{
              style:"width:100%",
              title:`联系方式：${node.data.phone}`
            }
          },
          [
            createElement('span', node.label),
            createElement('span', 
              {attrs:{
                style:"float: right; margin-right: 20px"
              }},
              `${node.data.dept_name}`
            )
          ]
        );
      },
      clickAreaChange() {
        this.roomLoaded = false;
        this.roomSelected = null;
        this.dutyName = "";
        this.dutyId = null;
      },
      clickAreaSelect(val) {
        if (!val) {
          return;
        }

        let vm = this;
        const params = {
          ril: 'S',
          page_num: 1,
          page_size: 999
        };

        if (!this.areaLoaded) {
          this.areaLoading = true;
          getAreaList(params)
          .then(response => {
            vm.areaList = response.data.rows;
            vm.areaLoaded = true;
            vm.areaLoading = false;
          })
          .catch(error => {
            vm.areaLoading = false;
          })
        }
      },
      clickRoomSelect(val) {
        if (!val || this.areaSelected == null) {
          return;
        }

        let vm = this;
        const params = {
          ril: 'S',
          purpose: 4,
          page_num: 1,
          page_size: 999
        };

        if (!this.roomLoaded) {
        this.roomLoading = true;
          getRoomList(this.areaSelected, params)
          .then(response => {
            vm.roomList = response.data.rows;
            vm.roomLoaded = true;
            vm.roomLoading = false;
          })
          .catch(error => {
            vm.roomLoading = false;
          })
        }
      },
      handleDevSelectionChange(val){
        let i = val.length;
        this.devMultipleSelection = new Array(i);
        while (i--) {
          this.devMultipleSelection[i] = val[i].dev_id;
        }
        console.log(this.devMultipleSelection);
      },
      handleDevDlgSelectionChange(val){
        let i = val.length;
        this.devDlgMultipleSelection = new Array(i);
        while (i--) {
          this.devDlgMultipleSelection[i] = val[i].dev_id;
        }
        console.log(this.devDlgMultipleSelection);
      },
      onCameraDlgSearchKW() {
        this.fetchCamera();
      },
      handleCameraDlgSelectionChange(val) {
        let i = val.length;
        this.cameraDlgMultipleSelection = new Array(i);
        while (i--) {
          this.cameraDlgMultipleSelection[i] = val[i].camera_id;
        }
        console.log(this.devMultipleSelection);
      },
       handleCameraSelectionChange(val) {
        let i = val.length;
        this.cameraMultipleSelection = new Array(i);
        while (i--) {
          this.cameraMultipleSelection[i] = val[i].camera_id;
        }
        console.log(this.cameraMultipleSelection);
      },
      handleSaveClick() {
        if (this.type == 'add') {
          this.add();
        } else if (this.type == 'update') {
          this.modify();
        }
      },
      add() {
        console.log(this.detail);
        this.detail.dev_room_type = this.devRoomTypeSelected;
        this.detail.area_id = this.areaSelected;
        this.detail.room_id = this.roomSelected;
        this.detail.duty_user = this.dutyId;

        let vm = this;
        createDevRoom(this.detail)
        .then(response => {
          vm.$router.go(-1);
        })
        .catch(error => {

        })
      },
      modify() {
        this.detail.dev_room_type = this.devRoomTypeSelected;
        this.detail.area_id = this.areaSelected;
        this.detail.room_id = this.roomSelected;
        this.detail.duty_user = this.dutyId;

        let vm = this;
        modifyDevRoom(this.id, this.detail)
        .then(response => {
          vm.$router.go(-1);
        })
        .catch(error => {

        })
      },
      onSearch(){
        this.fetchStaff();
      }
    }

  }

</script>  



